<template>
	<div class="wrapper">
				
		<!-- header部分 -->
		<header>
			<p>新建</p>
			<BackButton />
		</header>
		<!-- 商家logo部分 -->
		<div>
			</div>

			<!-- 编辑表单部分 -->
			<div class="food-edit-form">
			<label for="foodName">商品名称：</label>
			<input type="text" v-model="foodName" placeholder="输入食品名称" />

			<label for="foodPrice">商品价格：</label>
			<input type="number" v-model="foodPrice" placeholder="输入食品价格" />

			<label for="foodExplain">商品描述：</label>
			<textarea v-model="foodExplain" placeholder="输入食品描述"></textarea>

			<label for="foodImg">商品图片：</label>
			<input type="file" @change="onFileChange" accept="image/*" />

			<button @click="submitEdit">新建商品</button>
		</div>
	</div>
</template>

<script>
	import BackButton from '../components/BackButton.vue';
	export default{
		name:'FoodCreate',
		data(){
			return {
				businessId:'',
				foodId:'',
				foodImg:'',
				foodExplain:'',
				foodPrice:0.0,
				foodName:'',
				remarks:''
			}
		},
		
		created() {
			let user=this.$getSessionStorage('user');
			this.businessId=user.userId;
		},
		components:{
			BackButton
		},
		methods:{
			getImg(path){
				return 'http://47.92.162.176:8080'+path;
			},
			onFileChange(event) {
				// 当用户选择文件时，将文件存储到 selectedFile 中
				this.selectedFile = event.target.files[0];
				this.uploadImage(); // 调用上传函数
			},
			uploadImage() {
				let formData = new FormData();
				formData.append('file', this.selectedFile); // 将选中的文件附加到表单数据中

				// 使用 axios 上传图片到服务器
				this.$axios.post('FileController/user/img', formData, {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				})
				.then(response => {
					if (response.data.code === '200') {
						this.foodImg = response.data.result; // 从服务器获取图片的访问路径
					} else {
						alert('图片上传失败');
					}
				})
				.catch(error => {
					console.error('图片上传错误：', error);
				});
			},
			submitEdit() {
				// 提交修改后的商品信息
				console.log(this.$route.query.businessId);
				this.$axios.post('FoodController/addFoodByBusinessId', this.$qs.stringify({
					foodName: this.foodName,
					foodPrice: this.foodPrice,
					foodExplain: this.foodExplain,
					foodImg: this.foodImg,
					businessId: this.businessId,
					remarks : this.remarks,
					foodId : this.foodId
				}))
				.then(response => {
					if (response.data.code === '200') {
						alert('商品新建成功');
						this.$router.go(-1);
					} else {
						alert('新建失败');
					}
				})
				.catch(error => {
					console.error('提交错误：', error);
				});
			}
		},
	}
</script>

<style scoped>
	.wrapper {
		min-height: 150vh;
		display: flex;
		flex-direction: column;
	}

	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.business-logo {
		width: 100%;
		height: 35vw;
		margin-top: 12vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.business-logo img {
		width: 40vw;
		height: 30vw;
		border-radius: 5px;
		}

	/****************** 编辑表单部分 ******************/
	.food-edit-form {
		margin: 15vw 5vw;
		display: flex;
		flex-direction: column;
	}

	.food-edit-form label {
		font-size: 4vw;
		margin-bottom: 2vw;
	}

	.food-edit-form input,
	.food-edit-form textarea {
		width: 100%;
		padding: 3vw;
		font-size: 4vw;
		margin-bottom: 5vw;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.food-edit-form button {
		padding: 3vw;
		background-color: #0097ff;
		color: white;
		border: none;
		font-size: 4vw;
		border-radius: 10px;
		cursor: pointer;
	}
</style>
